{% extends 'layouts/base.html' %}
{% block content %}
<link rel="stylesheet" href="{{config['application']['site']['assetsUri']}}admin/css/AdminLTE.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="{{config['application']['site']['assetsUri']}}admin/css/morris.css">
<style>

</style>

    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-aqua">
            <div class="inner">
                <h3>{{not_paid_count}}</h3>
                <p>未支付</p>
            </div>
            <div class="icon">
                <i class="fa fa-credit-card"></i>
            </div>
            <a href="{{ url('backend/order/index/')}}/state/0/place/1" class="small-box-footer">
                查看详情 <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div><!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-green">
            <div class="inner">
                <h3>{{paid_count}}</h3>
                <p>已支付</p>
            </div>
            <div class="icon">
                <i class="fa fa-check-square-o"></i>
            </div>
            <a href="{{ url('backend/order/index/')}}/state/1/place/1" class="small-box-footer">
                查看详情 <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div><!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-yellow">
            <div class="inner">
                <h3>{{already_car_count}}</h3>
                <p>已派车</p>
            </div>
            <div class="icon">
                <i class="fa fa-truck"></i>
            </div>
            <a href="{{ url('backend/order/index/')}}/state/2" class="small-box-footer">
                查看详情  <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div><!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-red">
            <div class="inner">
                <h3>{{not_confirm_count}}</h3>
                <p>未确认</p>
            </div>
            <div class="icon">
                <i class="fa fa-exclamation"></i>
            </div>
            <a href="{{ url('backend/order/index/')}}/state/0/place/2" class="small-box-footer">
                查看详情  <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div><!-- ./col -->

<!-- DONUT CHART -->

    <div class="col-lg-6 col-xs-6" style="margin-top:50px;">
        <div class="box">
            <div class="box-header with-border">
                <i class="fa fa-cny"></i>
                <h3 class="box-title">近7天金额情况</h3>
            </div>
            <div class="box-body chart-responsive">
                <div class="chart" id="sales-chart" style="height: 300px; position: relative;"></div>
            </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div>
    <div class="col-lg-6 col-xs-6" style="margin-top:50px;">
        <!-- Bar chart -->
        <div class="box box-primary">
            <div class="box-header with-border">
                <i class="fa fa-bar-chart-o"></i>
                <h3 class="box-title">近7天完成订单数量({{order_finsh}})</h3>
            </div>
            <div class="box-body">
                <div id="bar-chart" style="height: 300px;"></div>
            </div><!-- /.box-body-->
        </div><!-- /.box -->
    </div>

<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="{{config['application']['site']['assetsUri']}}admin/js/morris.min.js"></script>
<!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
 <script src="{{config['application']['site']['assetsUri']}}admin/js/jquery.flot.min.js"></script>
<script src="{{config['application']['site']['assetsUri']}}admin/js/jquery.flot.categories.min.js"></script>
<script>
    
//DONUT CHART
var donut = new Morris.Donut({
    element: 'sales-chart',
    resize: true,
    colors: ["#3c8dbc", "#f56954", "#00a65a","#e1c66b"],
    data: [
        {label: '总金额', value: {{total_fee}}},
        {label: "未付款", value: {{not_paid_fee}}},
        {label: "已付款", value: {{paid_fee}}},
        {label: "已优惠金额", value: {{coupon}}}
    ],
    hideHover: 'auto'
});


/*
 * BAR CHART
 * ---------
 */

var bar_data = {
    data: [{{datestr|raw}}],
    color: "#3c8dbc"
};
$.plot("#bar-chart", [bar_data], {
    grid: {
        borderWidth: 1,
        borderColor: "#f3f3f3",
        tickColor: "#f3f3f3"
    },
    series: {
        bars: {
            show: true,
            barWidth: 0.5,
            align: "center"
        }
    },
    xaxis: {
        mode: "categories",
        tickLength: 0
    }
});
/* END BAR CHART */



</script>

{% endblock %}
